<template>
  <div class="content-moderation-container">
    <h1>内容审核管理</h1>

    <!-- 新增的审核栏 -->
    <el-card class="box-card pending-review-card">
      <div class="card-header">
        <span>待审核内容</span>
      </div>
      <el-table :data="pendingData" border style="width: 100%" v-loading="loading">
        <el-table-column prop="contentId" label="内容ID" width="100" />
        <el-table-column prop="title" label="新闻标题" />
        <el-table-column prop="submitTime" label="提交时间" width="180" />

        <el-table-column prop="submitter" label="提交人" width="120" />
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="{ row }">
            <el-button size="small" type="success" @click="handleApprove(row)">同意</el-button>
            <el-button size="small" type="danger" @click="handleReject(row)">拒绝</el-button>
            <el-button size="small" @click="handleView(row)">查看新闻</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="box-card">
      <div class="filter-container">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <el-form-item label="内容ID">
            <el-input v-model="queryParams.contentId" placeholder="请输入内容ID" clearable />
          </el-form-item>
          <el-form-item label="审核员ID">
            <el-input v-model="queryParams.reviewerId" placeholder="请输入审核员ID" clearable />
          </el-form-item>
          <el-form-item label="审核状态">
            <el-select v-model="queryParams.reviewStatus" placeholder="请选择审核状态" clearable>
              <el-option label="待审" :value="1" />
              <el-option label="通过" :value="2" />
              <el-option label="拒绝" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table :data="tableData" border style="width: 100%" v-loading="loading">
        <el-table-column prop="reviewId" label="审核ID" width="100" />
        <el-table-column prop="contentId" label="内容ID" width="100" />
        <el-table-column prop="reviewerId" label="审核员ID" width="100" />
        <el-table-column prop="reviewStatus" label="审核状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.reviewStatus === 1
              ? 'warning'
              : row.reviewStatus === 2
                ? 'success'
                : 'danger'
              ">
              {{
                row.reviewStatus === 1
                  ? "待审"
                  : row.reviewStatus === 2
                    ? "通过"
                    : "拒绝"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="reviewTime" label="审核时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.reviewTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="reviewComments" label="审核意见" />
        <el-table-column prop="reviewReasonType" label="原因类型" width="120" />
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.createTime) }}
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryParams.current" :page-sizes="[6, 10, 20, 50]" :page-size="queryParams.size"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 审核对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
      <el-form :model="reviewForm" label-width="80px">
        <el-form-item v-if="actionType === 'reject'" label="拒绝原因">
          <el-select v-model="reviewForm.reasonType" placeholder="请选择拒绝原因">
            <el-option label="格式不符合要求" value="格式不符合要求" />
            <el-option label="内容不完整" value="内容不完整" />
            <el-option label="内容质量低" value="内容质量低" />
            <el-option label="违反平台规则" value="违反平台规则" />
            <el-option label="包含敏感信息" value="包含敏感信息" />
            <el-option label="版权问题" value="版权问题" />
            <el-option label="内容重复" value="内容重复" />
            <el-option label="内容冒犯性" value="内容冒犯性" />
            <el-option label="信息不准确" value="信息不准确" />
            <el-option label="内容不适当" value="内容不适当" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input v-model="reviewForm.comments" type="textarea" :rows="4" placeholder="请输入审核意见" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitReview">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "@/utils/request";

export default {
  name: "ContentModeration",
  data() {
    return {
      tableData: [],
      pendingData: [
        {
          contentId: 1001,
          title: "全球气候变化最新研究报告",
          submitTime: "2023-05-15 10:30:25",
          submitter: "张三",
          reviewStatus: 1
        },
        {
          contentId: 1002,
          title: "人工智能技术发展现状分析",
          submitTime: "2023-05-16 14:20:10",
          submitter: "李四",
          reviewStatus: 1
        },
        {
          contentId: 1003,
          title: "城市交通拥堵解决方案探讨",
          submitTime: "2023-05-17 09:15:33",
          submitter: "王五",
          reviewStatus: 1
        }
      ],
      total: 0,
      loading: false,
      queryParams: {
        current: 1,
        size: 6,
        contentId: null,
        reviewerId: null,
        reviewStatus: null,
      },
      dialogVisible: false,
      dialogTitle: "",
      actionType: "",
      currentReviewItem: null,
      reviewForm: {
        reasonType: "",
        comments: ""
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      axios
        .get("/contentReviews/page", {
          params: this.queryParams,
        })
        .then((response) => {
          const result = response.data;
          if (result.code === 200) {
            this.tableData = result.data.records;
            this.total = result.data.total;
          } else {
            this.$message.error(result.msg || "获取数据失败");
          }
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
          this.$message.error("获取数据失败");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleQuery() {
      this.queryParams.current = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams = {
        current: 1,
        size: 6,
        contentId: null,
        reviewerId: null,
        reviewStatus: null,
      };
      this.getList();
    },
    handleSizeChange(val) {
      this.queryParams.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    handleApprove(row) {
      this.currentReviewItem = row;
      this.dialogTitle = "通过审核";
      this.actionType = "approve";
      this.reviewForm = {
        reasonType: "",
        comments: ""
      };
      this.dialogVisible = true;
    },
    handleReject(row) {
      this.currentReviewItem = row;
      this.dialogTitle = "拒绝审核";
      this.actionType = "reject";
      this.reviewForm = {
        reasonType: "",
        comments: ""
      };
      this.dialogVisible = true;
    },
    handleView(row) {
      this.$message.info(`查看新闻内容：${row.title} (ID: ${row.contentId})`);
    },
    formatDate(date) {
      if (!date) return '';
      try {
        const dateObj = typeof date === 'string' ? new Date(date) : date;
        const year = dateObj.getFullYear();
        const month = String(dateObj.getMonth() + 1).padStart(2, '0');
        const day = String(dateObj.getDate()).padStart(2, '0');
        const hours = String(dateObj.getHours()).padStart(2, '0');
        const minutes = String(dateObj.getMinutes()).padStart(2, '0');
        const seconds = String(dateObj.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      } catch (e) {
        return date;
      }
    },
    submitReview() {
      if (this.actionType === "reject" && !this.reviewForm.reasonType) {
        this.$message.warning("请选择拒绝原因");
        return;
      }

      const reviewResult = {
        reviewId: Date.now(),
        contentId: this.currentReviewItem.contentId,
        reviewerId: "current_user", // 实际应用中应该是当前登录用户ID
        reviewStatus: this.actionType === "approve" ? 2 : 3,
        reviewTime: new Date().toLocaleString(),
        reviewComments: this.reviewForm.comments,
        reviewReasonType: this.reviewForm.reasonType,
        createTime: this.currentReviewItem.submitTime
      };

      // 添加到已审核列表
      this.tableData.unshift(reviewResult);

      // 从待审核列表移除
      this.pendingData = this.pendingData.filter(
        item => item.contentId !== this.currentReviewItem.contentId
      );

      this.$message.success(
        `已${this.actionType === "approve" ? "通过" : "拒绝"}审核`
      );
      this.dialogVisible = false;
    }
  },
};
</script>

<style scoped>
.content-moderation-container {
  padding: 20px;
}

.filter-container {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.box-card {
  margin-top: 20px;
}

.pending-review-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}
</style>